<template>
  <!-- Vue3组件中的模板结构没有根标签 -->
  <h1>当前求和为：{{sum}}</h1>
  <button @click="sum++">点我+1</button>
</template>

<script>
  // import {h} from 'vue'
  import {  onBeforeMount,onBeforeUnmount,onBeforeUpdate,onMounted, onUnmounted, onUpdated, ref } from 'vue'
  export default {
    name: 'Demo',
    setup() {
      //数据
      let sum = ref(0)

      //通过组合式API的形式去使用生命周期钩子
      onBeforeMount(()=>{
        console.log('onBeforeMount执行了');
      }),
      onMounted(() => {
        console.log('onMounted执行了');
      }),
      onBeforeUpdate(() => {
        console.log('onBeforeUpdate执行了');
      }),
      onUpdated(() => {
        console.log('onUpdated执行了');
      }),
      onBeforeUnmount(() => {
        console.log('onBeforeUnmount执行了');
      }),
      onUnmounted(() => {
        console.log('onUnmounted执行了');
      })
      return {
        sum,
      }
    },
    //通过配置项的形式使用生命周期钩子
    //#region 
    /* beforeCreate(){
      console.log('---beforeCreate')
    },
    created(){
      console.log('---created')
    },
    beforeMount(){
      console.log('---beforeMount')
    },
    mounted(){
      console.log('---mounted')
    },
    beforeUpdate(){
      console.log('---beforeUpdate')
    },
    updated(){
      console.log('---updated')
    },
    beforeUnmount(){
      console.log('---beforeUnmount')
    },
    unmounted(){
      console.log('---unmounted')
    } */
    //#endregion
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>
